<template>
  <div class="body">
    <!-- <circleNav></circleNav> -->
    <div class="header">
      <img src="../../assets/tabbar/close.png" alt="" @click="router.back()" />
      <span>发布帖子</span>
      <span @click.native="submit">发布</span>
    </div>
    <div class="title">
      <img src="../../assets/tabbar/publishlogo.png" alt="" />
      <p>宠物志</p>
    </div>
    <!-- 上传图片 -->
    <van-cell-group inset>
      <van-field
        v-model="b_content"
        rows="2"
        size="large"
        autosize
        type="textarea"
        placeholder="你有什么看法 说说看吧"
        show-word-limit
      />
    </van-cell-group>
    <van-divider content-position="left">请选择图片</van-divider>
    <van-uploader v-model="fileList" multiple :after-read="afterRead" />
    <!-- <van-button
      type="primary"
      size="large"
      color="#ffc94b"
      style="
        font-size: 26px;
        margin: 0 10px;
        width: 90%;
        font-weight: bold;
        font-size: 20px;
      "
      @click="submit"
      >修改头像</van-button
    > -->
  </div>
</template>

<script setup>
import router from "@/router";
import { ref } from "vue";
import { circle } from "@/http/apis/circleApi";
import { useRoute } from "vue-router";
import { upload } from "@/http/myaxios";
import { showToast } from "vant";

const fileList = ref([]); // 复显图片
const b_content = ref(""); // 存放文案
const u_id = ref(useRoute().params.id); // 用户id

// 文件上传
let arrFile = []; // 存放上传图片的名字
const afterRead = async (file) => {
  // 此时可以自行将文件上传至服务器
  let fd = new FormData();
  fd.append("uploadInfo", file.file); // uploadInfo是后台定义接收上传文件的名字
  let res = await upload.post(fd);
  // 判断上传成功
  if (res.data.code == 200) {
    res.data.data.forEach((element) => {
      arrFile.push(element.filename);
    });
  }
};

// 发布帖子
async function submit() {
  let b_img = arrFile.join("&"); // 以&符拼接数组为字符串

  let params = { u_id: u_id.value, b_img, b_content: b_content.value };
  let res = await circle.addtiezi(params);
  if (res.data.code == 200) {
    showToast("发布成功");
    router.go(-1);
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 15px;

  img {
    width: 25px;
    height: 25px;
  }
}

.title {
  display: flex;
  border-bottom: 1px solid #eee;

  img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}
</style>
